import 'package:flutter/material.dart';

class CommentTest extends StatefulWidget {
  @override
  _CommentTestState createState() => _CommentTestState();
}

class _CommentTestState extends State<CommentTest> {
  TextEditingController _textEditingController = TextEditingController();
  String _currentTipsText = "有爱评论，说点儿好听的~";
  FocusNode _commentFocus = FocusNode();
  List<Map> _commentList = [
    {
      'name': '涂山雏雏',
      'headerImg':
          'https://image.baidu.com/search/detail?ct=503316480&z=undefined&tn=baiduimagedetail&ipn=d&word=头像&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=undefined&hd=undefined&latest=undefined&copyright=undefined&cs=1406515706,336510358&os=4093362394,436696647&simid=4156895644,551327479&pn=4&rn=1&di=93940&ln=1830&fr=&fmq=1629802194892_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&is=0,0&istype=0&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=0&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%253A%252F%252F5b0988e595225.cdn.sohucs.com%252Fimages%252F20171221%252F2a14e6b09df846a1908379c06045ba96.jpeg%26refer%3Dhttp%253A%252F%252F5b0988e595225.cdn.sohucs.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1632394194%26t%3Dbaf520f774b396f6dcf5ce0ba6ea690b&rpstart=0&rpnum=0&adpicid=0&nojc=undefined',
      'content': '你以为我是红细胞，其实我是兵库北哒(｀・ω・´)~'
    },
    {
      'name': '漆黑的魂焰魔法使',
      'headerImg':
          'https://image.baidu.com/search/detail?ct=503316480&z=undefined&tn=baiduimagedetail&ipn=d&word=头像&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=undefined&hd=undefined&latest=undefined&copyright=undefined&cs=2860640912,1833965317&os=408006341,1018456214&simid=3285786857,131990577&pn=8&rn=1&di=15400&ln=1830&fr=&fmq=1629802194892_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&is=0,0&istype=0&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=0&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%253A%252F%252Fb-ssl.duitang.com%252Fuploads%252Fitem%252F201508%252F18%252F20150818213048_vAdhz.jpeg%26refer%3Dhttp%253A%252F%252Fb-ssl.duitang.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1632394194%26t%3D85929ddf3c35a185903dcad119a14813&rpstart=0&rpnum=0&adpicid=0&nojc=undefined',
      'content': '你说我的头发怎么了啊，啊!'
    },
    {
      'name': '汐华初流艿',
      'headerImg':
          'https://image.baidu.com/search/detail?ct=503316480&z=undefined&tn=baiduimagedetail&ipn=d&word=头像&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=undefined&hd=undefined&latest=undefined&copyright=undefined&cs=3366246598,2446278796&os=54057901,419656999&simid=0,0&pn=21&rn=1&di=17270&ln=1830&fr=&fmq=1629802194892_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&is=0,0&istype=0&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=0&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%253A%252F%252Fb-ssl.duitang.com%252Fuploads%252Fitem%252F201603%252F19%252F20160319134314_aeAjE.jpeg%26refer%3Dhttp%253A%252F%252Fb-ssl.duitang.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1632394194%26t%3D8df5f7127b2e2d6bb5467b38a6978bcf&rpstart=0&rpnum=0&adpicid=0&nojc=undefined',
      'content': '你们因为你们身体里面真的有萌妹子吗，其实全都是dio哒'
    }
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(
            '点击留言输入框获取焦点',
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
        ),
        body: Stack(
          children: <Widget>[
            ListView.builder(
              itemCount: _commentList.length,
              itemBuilder: (context, index) {
                return ListTile(
                  leading: ClipRRect(
                    borderRadius: BorderRadius.circular(20),
                    child: Image.network(
                      _commentList[index]['headerImg'],
                      width: 40,
                      height: 40,
                    ),
                  ),
                  title: Text(_commentList[index]['name']),
                  subtitle: Text(_commentList[index]['content']),
                  onTap: () {
                    _switchReply(_commentList[index]['name']);
                  },
                );
              },
            ),
            Positioned(
              left: 0,
              bottom: 0,
              child: Container(
                width: MediaQuery.of(context).size.width,
                color: Color.fromRGBO(222, 222, 222, 1),
                height: 50,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Expanded(
                      child: TextField(
                        controller: _textEditingController,
                        focusNode: _commentFocus,
                        decoration: InputDecoration(
                          hintText: _currentTipsText,
                          contentPadding:
                              EdgeInsets.only(left: 10, top: 17, bottom: 17),
                        ),
                      ),
                    ),
                    InkWell(
                      child: Container(
                        width: 50,
                        height: 50,
                        alignment: Alignment.center,
                        child: Icon(Icons.near_me,
                            size: 25.5, color: Color.fromRGBO(50, 50, 50, 1)),
                      ),
                      onTap: () {
                        _sendMessage();
                      },
                    ),
                  ],
                ),
              ),
            ),
          ],
        ));
  }

  // 发送回复评论
  void _sendMessage() {
    _commentList.add({
      'name': '爱吃汉堡包的天残',
      'headerImg':
          'https://image.baidu.com/search/detail?ct=503316480&z=undefined&tn=baiduimagedetail&ipn=d&word=头像&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=undefined&hd=undefined&latest=undefined&copyright=undefined&cs=1097438391,3127450145&os=324594912,1640021982&simid=19620040,821968300&pn=33&rn=1&di=59840&ln=1830&fr=&fmq=1629802194892_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&is=0,0&istype=0&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=0&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%253A%252F%252Fa-ssl.duitang.com%252Fuploads%252Fitem%252F201901%252F11%252F20190111111418_ntkvt.jpeg%26refer%3Dhttp%253A%252F%252Fa-ssl.duitang.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1632394227%26t%3D6fdf4f3d27adcf0d1b942e8584cca986&rpstart=0&rpnum=0&adpicid=0&nojc=undefined',
      'content': _textEditingController.text
    });
    _currentTipsText = "有爱评论，说点儿好听的~";
    _textEditingController.text = '';
    _commentFocus.unfocus(); // 失去焦点
  }

  // 获取焦点拉起键盘
  void _switchReply(nickname) {
    setState(() {
      _currentTipsText = '回复 ' + nickname + ':';
    });
    FocusScope.of(context).requestFocus(_commentFocus); // 获取焦点
  }
}
